Enhanced onboarding page visual design#4156
Conversation
spencrmartin
commented
Aug 18, 2025
- Added card-based layout for provider selection
- Created OpenRouter and Ollama brand icon components
- Implemented shimmer effect for recommended option
- Added blue 'Recommended' badge for OpenRouter card
- Updated layout to be wider and left-aligned
- Improved visual hierarchy with consistent spacing
- Added descriptive text for each provider option
Yesir! Correct in thinking the greendot is the isrunning check of Ollama? |
Changed icon status dot to badge elements @zanesq |
zanesq
left a comment
There was a problem hiding this comment.
I think there might be a few bugs after selecting a provider, I don't see them on main:
- After selecting ollama or openrouter it goes to chat but I can't seem to click any of the navigation items anymore. I think it might not think there is a provider set in the route provider guard like it used to.
- If I select other providers and choose databricks it no longer goes to chat it just stays on the provider selection screen.
I wonder if we can tighten up the vertical space a bit more? This is at the default window height of 800px. Maybe we can remove the empty space under the icons for ollama and open router?

- Added card-based layout for provider selection - Created OpenRouter and Ollama brand icon components - Implemented shimmer effect for recommended option - Added blue 'Recommended' badge for OpenRouter card - Updated layout to be wider and left-aligned - Improved visual hierarchy with consistent spacing - Added descriptive text for each provider option
- Updated shimmer animation to go back and forth smoothly - Increased duration from 2s to 6s for more subtle effect - Reduced opacity values (max 0.15, mid 0.05) for subtlety - Changed gradient from via-white/20 to via-white/8 for lighter effect - Added ease-in-out timing for smoother transitions - Removed abrupt reset by creating continuous back-and-forth motion
- Moved OpenRouter and Ollama icons to be left-aligned above heading text - Removed inline flex layout that put icons next to text - Added mb-3 spacing between icons and headings for clean separation - Maintained responsive sizing (w-5 h-5 sm:w-6 sm:h-6) from previous work - Consistent structure across both provider cards - Icons now properly positioned as visual branding elements above content
- Fixed missing closing div tag that caused ESBuild transform error - Properly structured both OpenRouter and Ollama cards with clean JSX - Icons positioned above headings with mb-3 spacing - Maintained responsive design and shimmer effects - Consistent card layout and styling across both provider options
- Removed orphaned keyframe rules (25%, 50%, 75%, 100%) that were missing their parent @Keyframes declaration - Fixed 'Missing opening {' error in Tailwind CSS compilation - Balanced CSS braces (111 opening, 111 closing) - Maintained clean shimmer animation implementation
- Replaced WelcomeGooseLogo with BackButton for both onboarding and settings modes - Applied consistent header pattern matching other pages (ScheduleDetailView, SessionHistoryView) - Updated layout structure: BackButton → h1 title → description → border-b - Changed heading from text-2xl to text-4xl font-light for consistency - Added proper background and text color classes (bg-background-default text-text-default) - Used border-border-default instead of custom styling - Improved responsive text sizing and spacing - Removed conditional back button logic - now always shows back button
- Increased top padding from pt-6 to pt-12 to account for 32px titlebar-drag-region - Added pt-2 to back button container for better vertical spacing - Added no-drag class to back button container to ensure it remains clickable - Prevents macOS window controls (red/yellow/green buttons) from overlapping back button - Maintains consistent spacing with other pages while accounting for titlebar
…er providers' - Changed onboarding mode header to be more concise and consistent - Maintains 'Provider Configuration Settings' for non-onboarding mode - Aligns with the simplified, user-friendly language used elsewhere in onboarding
- Changed ProviderGrid justifyContent from 'start' to 'center' - Provider cards now center in available space instead of left-aligning - Eliminates large gap on the right side of the grid - Header text remains left-aligned for better readability - Improves visual balance of the provider selection page
- Added Ollama icon above heading with mb-3 spacing (matches onboarding cards) - Changed header from text-center to text-left alignment - Removed text-center from status messages and notifications - Imported Ollama icon component for consistent branding - Maintains left-aligned layout consistency throughout onboarding flow - Status messages now left-aligned for better readability
- Changed OpenRouter and Ollama icon spacing from mb-3 (12px) to mb-12 (48px) - Creates more generous visual breathing room between brand icons and headings - Improves visual hierarchy and makes the cards feel less cramped - Maintains consistent spacing across both provider cards
- Replaced large success box with compact green pill badge - Changed text from 'Ollama is running on your system' to 'Ollama is detected and running' - Uses same styling as the 'Detected' badge on main onboarding page (bg-green-600, rounded-full) - Maintains visual consistency between onboarding flow and setup page - Creates cleaner, more compact status indicator
- Added mb-16 (64px) margin-bottom to detected pill container - Creates generous breathing room between status indicator and action buttons - Improves visual hierarchy and reduces cramped feeling - Provides clear separation between status and next steps
- Replaced large warning box with compact orange pill badge - Changed from bg-background-warning box to bg-orange-600 rounded-full pill - Added mb-16 (64px) spacing between pill and Install button for consistency - Maintains pill badge pattern established for detected state - Only applies to secondary Ollama setup page, not main onboarding page
- Changed button text to be more concise and direct - 'Cancel' is clearer and more standard for secondary actions - Reduces cognitive load and makes the action more obvious - Maintains same styling and functionality
838333d to
ab9eb87
Compare
zanesq
left a comment
There was a problem hiding this comment.
LGTM, still think we should could save some vertical space however up to you
|
LGTM thanks! |
|
yep I like this. BTW - there will be another top level "one click" setup with a router soon, so any thoughts on how that would work with this @spencrmartin ? could be above "other providers" but still at that level (below recommended, peer with ollama?) |
|
@zanesq did the changes fix the problem with it not properly setting up the provider? |
| setShowFirstTimeSetup(false); | ||
| setHasProvider(true); | ||
|
|
||
| // Navigate to chat after successful setup |
There was a problem hiding this comment.
I think will need to check this running packaged, I had a hell of a time with things like this vs just run-ui
There was a problem hiding this comment.
Tested with the package also and it's working. I think its not so much a concern anymore with the new ui routing system.
|
@zanesq is this rdy |
Co-authored-by: Zane Staggs <zane@squareup.com> Signed-off-by: Jack Wright <jack.wright@nike.com>
* main: docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799) Don't show a confirm dialog for quitting (#4225) Fix: Missing smart_approve in CLI /mode help text and error message (#4132) Clean up langfuse docs and scripts (#4220) feat: add remark-breaks plugin to preserve single newlines in markdown (#4217) feat(mcp/developer): accept -1 for insert_line number (#4112) Remove dead code and old settings migration (#4180) removed tests from lint-staged (#4203) docs: openrouter and ollama easy desktop setup (#4195) Custom providers update (#4099) docs: goose_terminal env var (#4205) Desktop alerts when suspicious unicode characters found in Recipe (#4080) chore: remove the google drive built-in extension (#4187) Move out app init (#4185)
* main: Add PKCE support for Tetrate Agent Router Service (#4165) Read AGENTS.md by default (#4232) docs: configure provider and model (#4235) docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799)
* 'main' of github.com:block/goose: chore: upgrade rmcp to 0.6.0 (#4243) doc: uvx not npx (#4240) Add PKCE support for Tetrate Agent Router Service (#4165) Read AGENTS.md by default (#4232) docs: configure provider and model (#4235) docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799) Don't show a confirm dialog for quitting (#4225) Fix: Missing smart_approve in CLI /mode help text and error message (#4132)
* main: (108 commits) Remove unused game (#4226) fix issue where app redirects to home after initialization but user has already started a chat (#4260) Feat: Let providers configure a fast model for summarization (#4228) docs: update tool selection strategy (#4258) feat: upgrade `@mcp-ui/client` package and improve UI message handling (#4164) stop replacing chat window when changing working directory (#4200) Only fetch session tokens when chat state is idle to avoid resetting during streaming (#4104) bump timeouts for e2e tests (#4251) docs: custom context files improvements (#4096) chore: upgrade rmcp to 0.6.0 (#4243) doc: uvx not npx (#4240) Add PKCE support for Tetrate Agent Router Service (#4165) Read AGENTS.md by default (#4232) docs: configure provider and model (#4235) docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799) Don't show a confirm dialog for quitting (#4225) Fix: Missing smart_approve in CLI /mode help text and error message (#4132) ...

